<template>
	<cl-dialog
		:title="(editing == 'add' ? '新增' : editing == 'edit' ? '修改' : '复制') + '推广渠道'"
		:visible.sync="visible"
		width="30%"
		append-to-body
		@close="reset"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="form"
			label-width="100px"
			label-position="top"
			class="demo-form"
		>
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					filterable
					style="width: 100%"
					:disabled="editing == 'edit'"
				>
					<el-option
						v-for="(item, index) in business"
						:key="index"
						:label="item.biz_name"
						:value="item.biz_id"
					></el-option>
				</cl-select>
			</el-form-item>
			<el-form-item
				label="渠道名称"
				v-if="editing == 'add'"
				required
				style="margin-bottom: 0"
			>
				<el-form-item
					v-for="(item, index) in form.listName"
					:key="item.key"
					:prop="`listName.${index}.cname`"
					:rules="rules.cname"
				>
					<el-input v-model="item.cname" placeholder="渠道名称">
						<template slot="append">
							<el-button
								icon="el-icon-plus"
								@click="addName"
								v-if="form.listName.length == index + 1"
							/>
							<el-button icon="el-icon-minus" v-else @click="delName(index)" />
						</template>
					</el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item label="渠道名称" prop="cname" v-else>
				<el-input v-model="form.cname" placeholder="渠道名称" />
			</el-form-item>
			<el-form-item label="渠道类型" prop="type">
				<cl-select v-model="form.type" filterable style="width: 100%">
					<el-option
						v-for="(item, index) in typeList"
						:key="index"
						:label="item.label"
						:value="item.value"
					></el-option>
				</cl-select>
			</el-form-item>
			<el-form-item label="媒体平台" prop="media_platform">
				<cl-select v-model="form.media_platform" style="width: 100%">
					<el-option v-for="item, index in platList" :label="item.name" :key="index" :value="item.id" />
				</cl-select>
			</el-form-item>
			<el-form-item label="渠道状态" prop="status">
				<cl-select v-model="form.status" style="width: 100%">
					<el-option label="正常" :value="1" />
					<el-option label="禁用" :value="2" />
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import detectFaceFullScreen$ from 'dingtalk-jsapi/api/biz/ATMBle/detectFaceFullScreen';
export default {
	data() {
		return {
			saving: false,
			form: {
				id: undefined, //id
				cname: "", //渠道名称
				type: "", //渠道类型
				biz_id: "",
				status: "",
				media_platform: "",
				listName: []
			},
			rules: {
				cname: [{ required: true, message: "请填写渠道名称" }],
				type: [{ required: true, message: "请选择渠道类型" }],
				biz_id: [{ required: true, message: "请选择事业部" }],
				media_platform: [{ required: true, message: "请选择媒体平台" }],
				status: [{ required: true, message: "请选择渠道状态" }]
			},
			typeList: [
				{ value: 1, label: "推广使用" },
				{ value: 2, label: "其他" }
			],
			platList: [],
			editing: "add",
			visible: false
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(data = {}, editing) {
			console.log(data, 'open2')
			this.visible = true;
			this.getPlatList();
			this.editing = editing;
			if (editing == "add") {
				this.form.listName = [];
				this.form.status = 1;
				this.addName();
				return;
			}
			this.form.media_platform = '';
			Object.keys(this.form).forEach(k => {
				this.form[k] = data[k] ?? "";
			});
			this.form.listName = [];
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
			this.form = {
				id: "", //id
				cname: "", //渠道名称
				type: "", //渠道类型
				biz_id: this.getCurrBiz(),
				status: "",
				listName: []
			};
			this.addName();
		},
		close() {
			this.visible = detectFaceFullScreen$;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cname, biz_id, listName, ...args } = this.form;
				let form = {
					...args,
					biz_id,
					cname
				};
				if (this.editing == "add") {
					form.cname = listName.map(v => v.cname).join();
				}
				this.saving = true;
				await this.$service.source[this.editing == "edit" ? "update" : "add"](form).done(
					() => {
						this.saving = false;
					}
				);
				this.close();
				this.$emit("confirm", biz_id, this.editing == "edit" ? false : true);
				this.$message.success(`${this.editing == "add" ? "新增" : "修改"}成功`);
			});
		},
		//
		addName() {
			this.form.listName.push({ cname: "", key: Date.now() });
		},
		// 删除
		delName(index) {
			this.form.listName.splice(index, 1);
		},
		async getPlatList() {
			const data = await this.$service.platform.lists();
			this.platList = data;
		}
	}
};
</script>
